import React, { useState} from 'react';
import { Card } from 'antd';

interface ModelData {
  id: string;
  name: string;
  description: string;
  created_at: string;
  status: string;
  usage: number;
  requests: number; // 添加请求次数字段
}

const ModelList: React.FC = () => {
  const [models] = useState<ModelData[]>([
    {
      id: '1',
      name: '通义千问',
      description: '阿里云通义千问大语言模型，支持多轮对话和复杂任务处理',
      created_at: '2024-01-15T10:00:00Z',
      status: '运行中',
      usage: 65,
      requests: 15680
    },
    {
      id: '2',
      name: 'DeepSeek-r1',
      description: 'DeepSeek大语言模型，支持深度思考',
      created_at: '2024-01-14T15:30:00Z',
      status: '运行中',
      usage: 35,
      requests: 8420
    },
    {
      id: '3',
      name: 'qwq',
      description: '接近DeepSeek的模型，但更轻量级',
      created_at: '2024-01-14T15:30:00Z',
      status: '运行中',
      usage: 50,
      requests: 8420
    }
  ]);

  return (
    <div className="p-8 min-h-screen min-w-full">
      <div className="flex jusetify-between gap-10 flex-warp">
        {models.map((model) => (
          <Card
            key={model.id}
            className="hover:shadow-lg transition-all duration-300 w-100"
            title={
              <div className="flex items-center">
                <span className="text-xl font-medium">{model.name}</span>
                <span className={`ml-4 px-3 py-1 rounded-full text-sm font-medium ${
                  model.status === '运行中' ? 'bg-green-50 text-green-600' : 'bg-gray-50 text-gray-600'
                }`}>{model.status}</span>
              </div>
            }
          >
            <p className="text-gray-600 mb-4">{model.description}</p>
            <div className="text-sm text-gray-500">
              <div className="flex justify-between items-center mb-2">
                <span>创建时间</span>
                <span>{new Date(model.created_at).toLocaleDateString()}</span>
              </div>
              <div className="flex justify-between items-center">
                <span>使用占比</span>
                <span>{model.usage}%</span>
              </div>
            </div>
          </Card>
        ))}
      </div>
      <div className="mt-8">
        
      </div>
    </div>
  );
};

export default ModelList;